package com.csw.compose.ui.module.component.container

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview(heightDp = 2000)
@Composable
fun ColumnPreview() {
    BasePage({}, "列组件（Column）") { ColumnPage() }
}

class ColumnData {
    companion object : Destination("ColumnPage")
}

@Composable
fun ColumnPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("Column组件类似纵向的LinearLayout，用于子组件按列排布")
        Column {
            for (i in 1..5) {
                Box(
                    Modifier
                        .size(40.dp)
                        .alpha(0.1f * i)
                        .background(Color.Red)
                )
            }
        }
        LargeSpacer()

        UlItem("align")
        LabelText("内容受重力方向的影响，如果子组件之间也需要互相对齐，需要添加horizontalAlignment设置")
        BodyText("默认左对齐")
        Column {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("居中")
        Column(Modifier.align(Alignment.CenterHorizontally)) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("右对齐")
        Column(Modifier.align(Alignment.End)) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        LargeSpacer()


        UlItem("horizontalAlignment")
        LabelText("子组件对齐，配合align实现仿重力效果的")
        BodyText("左对齐")
        Column(horizontalAlignment = Alignment.Start) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("居中")
        Column(
            Modifier.align(Alignment.CenterHorizontally),
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        BodyText("右对齐")
        Column(Modifier.align(Alignment.End), horizontalAlignment = Alignment.End) {
            Box(
                Modifier
                    .size(40.dp)
                    .alpha(0.1f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(60.dp, 40.dp)
                    .alpha(0.2f)
                    .background(Color.Red)
            )
            Box(
                Modifier
                    .size(80.dp, 40.dp)
                    .alpha(0.3f)
                    .background(Color.Red)
            )
        }
        LargeSpacer()

        UlItem("verticalArrangement")
        LabelText("子组件在父组件中的排布方式")

        Row(
            Modifier.width(300.dp),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            BodyText("Top")
            BodyText("Center")
            BodyText("Bottom")
        }
        Row {
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.Top
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.Center
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.Bottom
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
        }

        Row(
            Modifier.width(300.dp),
            horizontalArrangement = Arrangement.SpaceAround
        ) {
            BodyText("SpaceBetween")
            BodyText("SpaceAround")
            BodyText("SpaceEvenly")
        }
        Row {
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.SpaceBetween
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.SpaceAround
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
            Column(
                Modifier
                    .size(100.dp, 200.dp)
                    .border(2.dp, Color.Gray),
                verticalArrangement = Arrangement.SpaceEvenly
            ) {
                for (i in 1..3) {
                    Box(
                        Modifier
                            .size(40.dp)
                            .alpha(0.1f * i)
                            .background(Color.Red)
                    )
                }
            }
        }
    }
}